<!-- 这是医生卡片页面 -->
<template>
  <view class="listItem">
    <view>
      <wd-img width="90rpx" height="90rpx" round src="/src/static/zhqImg/doctorHead@1x.png" />
    </view>
    <view class="content">
      <view>
        <view class="mx-0 my-10rpx" @click="dectorInfo">
          <span class="text-left tracking-0rpx leading-48rpx text-36rpx font-medium text-[#3c3e42]">
            {{ data.name }}
          </span>
          <span
            class="text-left tracking-0rpx leading-40rpx text-24rpx ml-15rpx text-[#6f6f6f] font-regular"
          >
            {{ data.department + " | " + data.professionalTitle }}
          </span>
        </view>
        <view class="items-center flex">
          <span
            class="font-regular h-28rpx w-36rpx rounded-4rpx text-center leading-28rpx text-18rpx text-[#fff] bg-[#677fff] w-52rpx"
          >
            {{ data.level }}
          </span>
          <spa
            class="text-left tracking-0rpx leading-42rpx text-24rpx font-regular ml-6rpx"
            nclass="text-[#3c3e42]"
          >
            {{ data.hospital }}
          </spa>
        </view>

        <wd-text
          custom-class="mt-10rpx"
          lineHeight="34rpx"
          color="#6F6F6F"
          size="24rpx"
          :text="data.specialties"
          :lines="2"
        ></wd-text>

        <view class="text-[rgba(0,0,0,0.25)] flex flex-items-center mt-20rpx">
          <view>
            <img
              class="v-middle h-22.26rpx w-23.35rpx"
              src="/src/static/zhqImg/starYellow1@1x.png"
              alt=""
            />
            <span
              class="text-left tracking-0rpx leading-36rpx text-24rpx font-Book ml-12.32rpx text-[#fea116]"
            >
              {{ data.star }}
            </span>
          </view>
          <span
            class="text-left tracking-0rpx leading-36rpx text-24rpx font-light ml-8rpx text-[#ededede5]"
          >
            /
          </span>
          <view>
            <span
              class="text-left tracking-0rpx leading-36rpx text-24rpx font-regular ml-8rpx text-[#979797]"
            >
              接诊数
            </span>
            <span
              class="text-left tracking-0rpx leading-36rpx text-24rpx font-Book ml-8rpx text-[#FEA116]"
            >
              {{ data.num }}万
            </span>
          </view>
        </view>
        <view class="w-full flex justify-between flex-items-center">
          <span
            class="text-left tracking-0prx leading-58rpx text-36rpx font-bold mt-30rpx text-[#2CB5A5]"
          >
            ￥{{ data.price }}
          </span>
          <view
            class="text-left tracking-0rpx leading-38rpx text-28rpx font-regular cursor-pointer justify-center items-center flex text-[#2CB5A5] h-58rpx w-140rpx bg-[#2CB5A519] rounded-55rpx"
            @click="toDoctor(data._id)"
          >
            问医生
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const data = ref({
  _id: "6792357128059b7a78ecbb82",
  isDeleted: 0,
  name: "张清北",
  department: "内分泌科",
  professionalTitle: "副主任医师",
  level: "三甲",
  hospital: "北京协和医院",
  specialties: "小儿呼吸、小儿消化、儿童过敏",
  star: "4.9",
  num: "1.2",
  price: "49",
  online: true,
  commentId: "1",
  createTime: 1737635185,
  updateTime: 1737635185,
  __v: 0,
});

const props = defineProps(["arr"]);

onMounted(() => {
  if (props.arr) {
    data.value = props.arr;
  }
});

const toDoctor = (id: any) => {
  uni.navigateTo({
    url: `/pages/Describe/index?id=${id}`,
  });
};
const dectorInfo = () => {
  uni.navigateTo({
    url: `/pages/AskDoctor/components/details?id=${data.value._id}`,
  });
};
</script>

<style scoped lang="scss">
.content {
  width: 70%;
  margin-left: 30rpx;
}

.listItem {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 40rpx;
  margin-top: 40rpx;
}
</style>
